<script setup>
import { defineProps, defineEmits, ref, nextTick } from 'vue'
const tagList = ref()
const formRef = ref()
const isFocus = ref(false)
const props = defineProps({
	tagGroupVisible: Boolean,
	serchList: Array
})
const tagGroupVisible = ref(props.tagGroupVisible)
const dynamicValidateForm = ref({
	domains: [
		{
			key: 1,
			value: '',
			isFocus: false
		}
	],
	labelName: ''
})

const removeDomain = (item) => {
	const index = dynamicValidateForm.value.domains.indexOf(item)
	if (index !== -1) {
		dynamicValidateForm.value.domains.splice(index, 1)
	}
}
const groupFocus = (item) => {
	item.isFocus = true
}
const groupBlur = (item) => {
	item.isFocus = false
}
const inputFocus = () => {
	isFocus.value = true
}
const inputBlur = () => {
	isFocus.value = false
}
const addDomain = () => {
	dynamicValidateForm.value.domains.push({
		key: Date.now(),
		value: '',
		isFocus: false
	})
	nextTick(() => {
		tagList.value.scrollTop = tagList.value.scrollHeight
	})
}
const validate = (prop, isValid, message) => {
	// console.log(prop)
	// console.log(isValid)
}
const submitForm = (formEl) => {
	if (!formEl) return
	formEl.validate((valid) => {
		console.log(valid)
		if (valid) {
			const obj = {
				corp_id: new Date(),
				id: new Date() + 1,
				isShow: false,
				name: dynamicValidateForm.value.labelName,
				tag_list: []
			}
			dynamicValidateForm.value.domains.forEach((tag, index) => {
				obj.tag_list.push({
					corp_id: new Date() + index,
					id: new Date() + index,
					isCheck: false,
					name: tag.value
				})
			})
			props.serchList.push(obj)
			dynamicValidateForm.value.domains = [
				{
					key: 1,
					value: '',
					isFocus: false
				}
			]
			console.log('submit!')
		} else {
			console.log('error submit!')
			return false
		}
	})
}
const resetForm = (formEl) => {
	if (!formEl) return
	formEl.resetFields()
	emits('changetagGroupVisible', false)
	dynamicValidateForm.value.domains = [
		{
			key: 1,
			value: '',
			isFocus: false
		}
	]
}
const emits = defineEmits(['changetagGroupVisible'])
const closeModel = () => {
	emits('changetagGroupVisible', false)
}
//标签搜索
</script>
<template>
	<el-dialog class="customer-dialog" v-model="tagGroupVisible" width="32%" @close="closeModel">
		<template #header="{ close, titleId, titleClass }">
			<div class="my-header">
				<h4 style="text-align: center; margin-top: 10px">新建标签组</h4>
			</div>
		</template>
		<div class="dialog-content">
			<!-- 标签列表区域 -->
			<div class="tag-list" ref="tagList">
				<el-form
					@validate="validate"
					ref="formRef"
					:model="dynamicValidateForm"
					label-width="auto"
					class="demo-dynamic"
				>
					<el-form-item
						:rules="[
							{
								required: true,
								message: '请填写标签组名称'
							}
						]"
						prop="labelName"
						label="标签组名称:"
					>
						<el-input
							maxlength="15"
							placeholder="请输入标签组名称"
							:show-word-limit="isFocus"
							v-model="dynamicValidateForm.labelName"
							@focus="inputFocus"
							@blur="inputBlur"
						/>
					</el-form-item>
					<el-form-item
						v-for="(domain, index) in dynamicValidateForm.domains"
						:key="domain.key"
						:label="index === 0 ? '标签名称:' : ''"
						:prop="'domains.' + index + '.value'"
						:rules="[
							{
								required: true,
								message: '请填写标签名称'
							}
						]"
					>
						<el-input
							maxlength="15"
							@focus="groupFocus(domain)"
							@blur="groupBlur(domain)"
							placeholder="请输入标签名称"
							:show-word-limit="domain.isFocus"
							v-model="domain.value"
						/>
						<el-icon
							v-show="dynamicValidateForm.domains.length > 1"
							@click="removeDomain(domain)"
							style="margin-left: 16px; cursor: pointer"
							><Remove
						/></el-icon>
					</el-form-item>
					<el-form-item>
						<div @click="addDomain" class="add-input">
							<el-icon style="margin-right: 3px; font-size: 16px"><CirclePlus /></el-icon>
							添加标签
						</div>
					</el-form-item>
				</el-form>
			</div>
		</div>
		<template #footer>
			<div class="footer-btn">
				<div>
					<el-button style="padding: 0 21px" @click="resetForm(formRef)">取消</el-button>
					<el-button style="padding: 0 21px" type="primary" @click="submitForm(formRef)">确定</el-button>
				</div>
			</div>
		</template>
	</el-dialog>
</template>

<style lang="scss" scoped>
:deep(.el-radio-button) {
	width: 50%;
}
:deep(.el-radio-button__inner) {
	width: 100%;
}
a {
	color: #1890ff;
	text-decoration: none;
	cursor: pointer;
}
.gray {
	color: #595959;
	margin: 0 8px;
	font-size: 14px;
}
.dialog-footer button:first-child {
	margin-right: 10px;
}
.dialog-content {
	width: 100%;

	padding: 8px 3px 8px 18px;
	.dialog-header {
		display: flex;
		align-items: center;
		width: 100%;
		margin-top: -20px;
		padding: 6px 12px;
		margin-bottom: 20px;
		color: rgba(0, 0, 0, 0.65);
		font-size: 13px;
		background-color: #effaff;
		.line {
			width: 3px;
			height: 12px;
			background: #b8b8b8;
			margin-right: 6px;
		}
	}
	.tag-list {
		width: 100%;
		max-height: 370px;
		margin-top: -26px;
		overflow-y: auto;
		user-select: none;
		:deep(.el-input) {
			width: 85%;
		}
		:deep(.el-form-item__label:before) {
			display: none;
		}

		:deep(.el-input__inner) {
			padding: 8px 0px;
		}
		.add-input {
			display: flex;
			align-items: center;
			margin-top: -12px;
			color: #1890ff;
			cursor: pointer;
		}
	}
	.tag-list::-webkit-scrollbar {
		width: 4px;
	}
	.tag-list::-webkit-scrollbar-thumb {
		border-radius: 10px;
		box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
		background: rgba(0, 0, 0, 0.2);
	}
	.tag-list::-webkit-scrollbar-track {
		box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
		border-radius: 0;
		background: rgba(0, 0, 0, 0.1);
	}
}
.footer-btn {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding-right: 6px;
}
</style>
